<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <el-dialog
    v-model="props.visible"
    :title="operateTitle"
    width="500"
    @close="handleVisible('cancel')"
  >
    <el-form ref="formRef" size="small" :rules="rules" :model="form" label-width="110px">
      <el-form-item label="要素库名称：" prop="databaseName">
        <el-input v-model="form.databaseName" placeholder="请输入要素库类型名称" :disabled="modelType === 'view'" />
      </el-form-item>
      <el-form-item label="要素库层级：" prop="level">
        <el-select :disabled="props.level" v-model="form.level" placeholder="请选择层级">
          <el-option v-for="item in props.typeList" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.level == 2" label="所属父级库：" prop="parentId">
        <el-select style="width: 480px" :disabled="props?.parentId && props?.parentId != 0" v-model="form.parentId" clearable placeholder="请选择">
            <el-option v-for="item in parentDatabaseList" :label="item.databaseName" :value="item.id" :key="item.id"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="描述：" prop="description">
        <el-input type="textarea" :rows="3" v-model="form.description" placeholder="请输入描述" :disabled="modelType === 'view'" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="handleVisible('cancel')">取消</el-button>
        <el-button v-if="modelType !== 'view'" size="small" type="primary" @click="submitAdd">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { addDatabaseType, updateDatabaseType, getDatabaseTypeDetail, getDatabaseTypeList } from '@/api/databaseManagement';
const props = defineProps(['visible', 'rowId', 'operateTitle', 'operateType', 'typeList', 'parentId', 'level']);
const emits = defineEmits(['handleEvent']);
const parentDatabaseList = ref([]);
const formRef = ref();
// 组织数据
const form = ref({
  id: undefined,
  databaseName: undefined,
  level: props?.level,
  parentId: props?.parentId,
  description: undefined,
});
// 向父组件发出信号控制弹窗的隐藏
const handleVisible = (type) => {
  if (type === 'cancel') {
    emits('handleEvent', { type: 'view' });
  }
};

// 数据校验规则
const rules = ref({
  databaseName: [{ required: true, message: '请输入要素库类型名称', trigger: 'blur' }],
  level: [{ required: true, message: '请选择库层级', trigger: 'change' }],
  parentId: [{ required: true, message: '请选择父级库', trigger: 'change' }]
});

// 表单提交
const submitAdd = () => {
  formRef.value.validate((valid) => {
    if (!valid) {
      return;
    } else {
      // 发送请求
      if (props.operateType === 'EDIT') {
        // form.value.level == 1 && (form.value.parentId = 0);
        updateDatabaseType(form.value).then((res) => {
          if (res?.code === 200) {
            emits('handleEvent', { type: 'refresh' });
            ElMessage({ showClose: true, message: '修改成功', type: 'success' });
          }
        });
      } else if (props.operateType === 'ADD') {
        form.value.level == 1 && (form.value.parentId = 0);
        addDatabaseType(form.value).then((res) => {
          if (res?.code === 200) {
            emits('handleEvent', { type: 'refresh' });
            ElMessage({ showClose: true, message: '新增成功', type: 'success' });
          }
        });
      } 
    }
  });
};

const getEnumList = async () => {
  await getDatabaseTypeList({pageSize: 9999, pageNum: 1}).then(res => {
    if (res.rows) {
      parentDatabaseList.value = res.rows.filter(item => item.level == 1);
    }
  })
}

const getDetail = (id) => {
  getDatabaseTypeDetail({id}).then(res => {
    form.value = res.data;
  })
}

onMounted(async () => {
  await getEnumList();
  props?.rowId && getDetail(props?.rowId);
});
</script>

<style scoped>
.location-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* 增加间隔 */
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.el-dialog__header {
  font-weight: bold;
}
</style>
